<template>
	<NavBar :obj="{ title: '店铺信息', color: '#000', backgroundColor: '#fff' }" />

	<view class="container">
		<view class="logo flex flex-col items-center justify-between">
			<image :src="imgUrl + info.cover"></image>
			<view>{{ info.title }}</view>
		</view>
		<view class="shop">
			<view class="item flex items-center justify-between">
				<view class="left">门店类型</view>
				<view class="right flex-1">{{ info.cate?.title }}</view>
			</view>
			<view class="item flex items-center justify-between">
				<view class="left">店主姓名</view>
				<view class="right flex-1">{{ info.shopkeeper }}</view>
			</view>
			<view class="item flex items-center justify-between">
				<view class="left">手机号码</view>
				<view class="right flex-1">{{ info.mobile }}</view>
			</view>
			<view class="item flex items-center justify-between">
				<view class="left">门店地址</view>
				<view class="right flex-1">{{ info.full_address }}</view>
			</view>
			<view class="item flex items-center justify-between">
				<view class="left">营业执照</view>
				<view class="right flex-1">
					<image :src="imgUrl + info.license"></image>
				</view>
			</view>
		</view>

		<view class="landlord">
			<view class="title flex items-center justify-between">
				<view class="left">房东</view>
				<view class="right flex items-center justify-center" @click="goUrl('/pages/shop/shareholder?title=添加房东')" v-if="!info.landlord">
					<image src="/static/shop/ic_tianjred.png"></image>
					<text>添加</text>
				</view>
			</view>
			<view class="infos flex items-center justify-between">
				<block v-if="info.landlord != null">
					<view class="photo">
						<image :src="imgUrl + info.landlord?.photo"></image>
					</view>
					<view class="composite flex-1">
						<view class="nickname-top flex items-center">
							<view class="nickname line-1-clamp" style="max-width: 50%">{{ info.landlord?.nickname }}</view>
						</view>
						<view class="bottom flex items-center">
							<view class="item flex items-center">
								<text>{{ info.landlord?.mobile }}</text>
							</view>
							<view class="item">
								<text>ID：{{ info.landlord?.code }}</text>
							</view>
						</view>
					</view>
				</block>
				<up-empty v-else icon="/static/product/ic_zerodata@2x.png" iconSize="192rpx" text="尚未添加房东" style="flex: 1 1 0%" />
			</view>
		</view>
		
		<view class="landlord">
			<view class="title flex items-center justify-between">
				<view class="left">店铺数据</view>
				
			</view>
			<view class="infos warp flex items-center justify-between">
				<view class="item">
					<view class="v">{{ info.team_contribution }}</view>
					<view class="t">运营团队贡献值</view>
				</view>
				<view class="item">
					<view class="v">{{ info.team_hds }}</view>
					<view class="t">运营团队分红</view>
				</view>
				<view class="item">
					<view class="v">{{ info.other_contribution }}</view>
					<view class="t">其他贡献值</view>
				</view>
				<view class="item">
					<view class="v">{{ info.other_hds }}</view>
					<view class="t">其他分红</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { port, imgUrl, hint, goUrl, goBack, goIndex } from '../../service/port';
	import { onShow } from '@dcloudio/uni-app';

	const info = ref('');

	onShow(() => {
		getMyShopInfo();
	});

	async function getMyShopInfo() {
		let res = await port('getMyShopInfo');

		info.value = res.data;
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f0f0f0;
	}

	.container {
		padding-bottom: 120rpx;
		margin: 30rpx;
		.logo {
			> image {
				width: 182rpx;
				height: 182rpx;
				background: #f2f2f2;
				border-radius: 16rpx;
			}
			> view {
				margin-top: 24rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
			}
		}

		.shop {
			margin-top: 44rpx;
			padding: 10rpx 30rpx;
			background: #ffffff;
			border-radius: 16rpx;
			.item {
				padding: 20rpx 0;
				.left {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}
				.right {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					margin-left: 50rpx;

					> image {
						width: 224rpx;
						height: 224rpx;
						background: #f2f2f2;
						border-radius: 16rpx;
					}
				}
			}
		}

		.landlord {
			margin-top: 30rpx;
			.title {
				margin-bottom: 25rpx;
				.left {
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
				}
				.right {
					> image {
						width: 20rpx;
						height: 20rpx;
						margin-top: 3rpx;
					}
					> text {
						font-weight: 400;
						font-size: 27rpx;
						color: #f81a2e;
						margin-left: 8rpx;
					}
				}
			}
			
		

			.infos {
				background: #ffffff;
				border-radius: 16rpx;
				padding: 24rpx;
				border-bottom: 1rpx solid #eee;
				&:last-child {
					border-bottom: none;
				}

				.photo {
					background: #ffffff;
					box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(228, 47, 4, 0.26);
					border-radius: 50%;
					border: 5rpx solid #ffffff;
					width: 94rpx;
					height: 94rpx;
					> image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.composite {
					margin-left: 22rpx;
					.nickname-top {
						.nickname {
							font-weight: 500;
							font-size: 28rpx;
							color: #000000;
						}
					}

					.bottom {
						margin-top: 15rpx;
						gap: 35rpx;
						.item {
							> text {
								font-weight: 400;
								font-size: 22rpx;
								color: #999999;
							}
						}
					}
				}
			}
			
			.warp{
				padding: 40rpx 0;
				flex-wrap: wrap;
				gap: 50rpx 0;
				.item{
					width: 50%;
					text-align: center;
					.v{
						font-weight: 500;
						font-size: 40rpx;
						color: #000000;
					}
					.t{
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						margin-top: 20rpx;
					}
				}
			}
		}
	}
</style>
